import { Button, Row, Col, Spin, Divider, Dropdown, Form, Icon, Menu, message, Avatar, PageHeader, Popover, Tooltip, } from 'antd';
import React, { useState, useEffect, useContext, useRef } from 'react';
import styles from "./index.less";
import { COL_SPAN } from "@/generic/ConfigParams";
import fileImg from "../imgs/othe.png";
import dirImg from "../imgs/folder.png";
import { dateSort as dataTypeOrder } from "@/generic/Utils";
import { TableListContext } from "../index";
import { downloadMenu, handleUpdate } from "./DirsTable";
import UpdateForm from './UpdateForm';
import { deleteOpt } from "./OptionsHeader";


const AllGridItem = props => {

    const { dataArr, vdisk, onGridItem, rightOpts, tableRefresh } = props;
    const cols = [];

    // useEffect(() =>{
    //     console.log("==>> dataArr is show!")
    //     // dataArr.sort(dataTypeOrder);  // 数组内部变化不会触发更新
    // }, [dataArr])

    const onColClick = (event, record) => {
        
        if (record.isDir) {
            event.onClick();
            return;
        }
        props.history.push("/file/detail", {
            file: record,
            vdiskName: vdisk(),
        })
    }

    const createOptsRow = (record, vdiskName = vdisk()) => {

        return (
            <>
                <Row><Icon type="edit" onClick={(e) => {
                    rightOpts.setSrcfile(record);
                    rightOpts.setModalVisible(true);
                }} /></Row>
                {
                    record.isDir
                        ? <Divider type="horizontal" className={styles.divider} />
                        : <Row>
                            <Dropdown key="2" overlay={downloadMenu(record, vdiskName)} placement="bottomLeft">
                                <a><Icon type="download" style={{ color: "green" }} /></a>
                            </Dropdown>
                        </Row>
                }
                <Row><Icon type="delete" style={{ color: "red" }} onClick={() => deleteOpt([record], vdiskName, tableRefresh)} /></Row>
            </>
        );
    }

    if (dataArr.length > 0) {

        dataArr.sort(dataTypeOrder);
        dataArr.forEach((item, i) => {
            const event = onGridItem(item);

            const GridItem = props => {

                const fileRef = useRef();
                const [showOpts, setShowOpts] = useState(false);

                return (
                    <Col  {...COL_SPAN}
                        onMouseEnter={() => setShowOpts(true)}
                        onMouseLeave={() => setShowOpts(false)}
                    >
                        <div className={styles.colBlock}>
                            <Row>
                                <Col span={!showOpts ? 24 : 16} onClick={() => onColClick(event, item)}>
                                    {
                                        item.isDir
                                            ? <Avatar src={dirImg} shape="square" size={64} alt="目录" />
                                            : <Avatar src={fileImg} shape="square" size={64} alt="文件" />
                                    }
                                </Col>
                                {
                                    showOpts
                                        ? <Col className={styles.optsBlock}>{createOptsRow(item)}</Col>
                                        : ""
                                }
                            </Row>
                            <Row>
                                <div ref={fileRef}>{item.name}</div>
                            </Row>
                        </div>
                    </Col>
                );
            }

            cols.push(<GridItem key={i} />);
        })
    }
    
    return <Row gutter={[16, 16]}>{cols}</Row>;
}

const GirdDirsTable = props => {

    const { data, vdisk, currentPath, tableRefresh, } = props;
    const contextOpts = useContext(TableListContext);

    const [gridItems, setGridItems] = useState([]);
    const [modalVisible, setModalVisible] = useState(false);
    const [srcfile, setSrcfile] = useState();

    useEffect(() => {
        data.then(content => {
            console.log("data is change !")
            setGridItems(content);
            contextOpts.loading.dispatch({ type: 'loading', value: false })
        })
    }, [data])

    return (
        <div style={{backgroundColor: "#fff"}}>
            <Spin spinning={contextOpts.loading.param} delay={200}>
                <AllGridItem 
                    dataArr={gridItems}
                    rightOpts={{setModalVisible, setSrcfile}}
                    {...props}
            /> 
            </Spin>
            <UpdateForm
                onSubmit={async value => {

                    const success = await handleUpdate(value, vdisk(), currentPath, srcfile);
                    console.log("==>> success", success, value)
                    if (success) {
                        setModalVisible(false);
                        tableRefresh();
                    }
                }}
                onCancel={() => setModalVisible(false)}
                modalVisible={modalVisible}
                srcfile={srcfile}
            />
        </div>
    );
}

export default GirdDirsTable;